<template>
	<div id="verification">
		<!-- <img :src="`${style.logoUrl}`" alt=""> -->
		<div id="captcha-box"></div>
	</div>

</template>

<script>
	import tac from '@/tac/js/tac.min.js'
	import logo from "@/assets/logo.png"
	import baseUrl from '@/request/config.js'
	export default {
		name: 'verification',
		data() {
			return {
				baseUrl: baseUrl,
				globalTAC: null,
				config: {
					// 生成接口
					requestCaptchaDataUrl: baseUrl + "/captcha?type=ROTATE",
					// 验证接口
					validCaptchaUrl: baseUrl + "/check",
					// 验证码绑定的div块
					bindEl: "#captcha-box",
					// 验证成功回调函数
					validSuccess: (res, c, tac) => {
						// 销毁验证码服务
						tac.destroyWindow();
						// 调用登录方法
						console.log("调用登录方法")
						// this.login(res.data.id);
						this.$emit('update-data', {
							type: true,
							id: res.data.id
						});
					}
				},
				style: {
					// 配置样式， logoURL地址
					logoUrl: logo
				}

			}
		},
		created() {},
		mounted() {
			console.log("引入机器验证插件")
			this.openCaptcha('CONCAT');
		},
		methods: {
			openCaptcha(type) {
				if (this.globalTAC) {
					this.globalTAC.destroyWindow();
				}
				this.config.requestCaptchaDataUrl = this.baseUrl + "/captcha?type=" + type
				this.globalTAC = new TAC(this.config, this.style).init();
			},


		}
	}
</script>

<style lang="scss" scoped>
	@import "../tac/css/tac.css";

	#verification {
		width: 100%;
		height: auto;
		background-color: transparent;
	}

	#captcha-box {
		width: 100%;
		height: auto;
	}

	::v-deep #tianai-captcha-parent {
		width: 100%;
	}

	// ::v-deep .slider-bottom {
	// 	display: flex;
	// 	align-items: center;

	// 	.logo {
	// 		width: 20px;
	// 		height: 20px;
	// 	}
	// }
</style>